<template>
  <div class="page">
    <div class="contentWrapper">
        <h1 class="pageTitle">事实收集</h1>
        <div class="surveyWrapper">
            <transition-group name="list">
            <div class="questionWrapper" v-if="questionsList[0]" v-for="(question, index) in questionsList" :key="index">
                <div v-if="!endSurvey || index < questionsList.length-1" class="dialogue left">
                    {{question["问题"]}}
                </div>
                <div v-if="!endSurvey || index < questionsList.length-1" class="dialogue right">
                    <div class="answer" v-if="question.类型 == '选项'" v-for="optionItem in question['取值']" @click="selectAnswer(question['idx'],optionItem, $event)">
                        {{optionItem}}
                    </div>
                    <div class="answer" v-if="question.类型 == '输入'">
                        <input type="text" name="inputAnswer" :id="'inputForQuestion' + question['idx']">
                        <button @click="valideInputAnswer(question['idx'], $event)">确认</button>
                    </div>
                </div>
                <div class="clearFix"></div>
                <div v-if="endSurvey && index == questionsList.length-1" class="btnResult" @click="redirect('Result')">查看结果</div>
            </div>
            </transition-group>
        </div>
    </div>
  </div>
</template>
<script>
import bgImgUrl from '../imgs/bg-home.png';
var vm;
export default {
    data() {
        return {
            lastestResponse: {},
            selectionList: [],
            questionsList: [],
            result: '',
            currentQuestionIdx: '',
            endSurvey: false
        }
    },
    created: function(){
        vm = this;
        vm.sendFaqRequest(vm.convertSelectionListToStrJson());
    },
    mounted() {
        document.getElementsByTagName('html')[0].style.background = 'url(' + bgImgUrl + ')'
    },
    methods: {
        redirect: function (pageName) {
            console.log(vm.result);
            vm.$router.push({ name: pageName, params: {result:vm.result} });
        },
        sendFaqRequest(selectionList,eventTarget) {
            axios.get(global.SERVER + '/api/faq/' + selectionList)
                .then(function (response) {
                    
                    vm.lastestResponse = response.data;

                    if (eventTarget) {
                        vm.highlightTarget(eventTarget);
                    }

                    var data = response.data;
                    
                    vm.selectionList = data[data.A[data.A.length-1]];
                    var idx = data.Q["idx"];
                    var question = data.Q["问题"];
                    var type = data.Q["类型"];
                    var answers = data.Q["取值"];
                    var questionWrapper = {"idx":idx,"问题":question,"类型":type,"取值":answers};
                    if(data.R) {
                        questionWrapper.R = data.R[data.A[0]];
                    }
                    vm.questionsList.push(questionWrapper);
                    vm.changCurrentQuestionIdx(idx);

                    if (data.isMatch == "T") {
                        vm.result = data.R;
                        vm.endSurvey = true;
                    }

                    setTimeout(function(){
                        window.scrollTo(0,document.body.scrollHeight);
                    },50)
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        selectAnswer(questionIdx,answer,event) {
            if (questionIdx != vm.currentQuestionIdx) {
                return;
            }
            var selectionJson = {};
            selectionJson[questionIdx] = answer;
            vm.selectionList.push(selectionJson);
            vm.sendFaqRequest(vm.convertSelectionListToStrJson(),event.target);
        },
        valideInputAnswer(questionIdx,event) {
            if (questionIdx != vm.currentQuestionIdx) {
                return;
            }
            var selectionJson = {};
            var answer = document.getElementById('inputForQuestion' + questionIdx).value;
            selectionJson[questionIdx] = answer;
            vm.selectionList.push(selectionJson);
            vm.sendFaqRequest(vm.convertSelectionListToStrJson(),event.target);
        },
        convertSelectionListToStrJson(){
            if (!vm.selectionList[0] && !vm.currentQuestionIdx) {
                var strJson = '{}';
            }else {
                var jsonTemp = {};
                jsonTemp.A = vm.lastestResponse.A;

                jsonTemp.A.forEach((element, index, currentArray) => {
                    var questionTitle = vm.lastestResponse.A[index];

                    if (index == currentArray.length - 1) {
                        jsonTemp[questionTitle] = vm.selectionList;
                    }else {
                        jsonTemp[questionTitle] = vm.lastestResponse[questionTitle];
                    }
                });

                jsonTemp.Q = vm.lastestResponse.Q;
                if(vm.lastestResponse.R) {
                    jsonTemp.R = vm.lastestResponse.R;
                }

                var strTemp = JSON.stringify(jsonTemp);
                var strJson = encodeURIComponent(strTemp);
            }
            return strJson;
        },
        highlightTarget(target) {
            var oldClass = target.className;
            var newClass = oldClass?oldClass+' selected':'selected';
            target.className =  newClass;
        },
        changCurrentQuestionIdx(idx) {
            vm.currentQuestionIdx = idx;
        }
    }
}
</script>
<style lang="scss" scoped>
@media screen and (min-width: 920px) {
    .contentWrapper {
        max-width: 920px;
        margin: 0 auto;
    }
    .list-item {
    display: inline-block;
    margin-right: 10px;
    }
    .list-enter-active, .list-leave-active {
    transition: all .8s;
    }
    .list-enter, .list-leave-to
    /* .list-leave-active for below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(30px);
    }
    #topLine {
        width: 100%;
        height: 48px;
        background-image: url(../imgs/topline.png);
        background-size: cover;
        box-shadow: 1px 1px .2px rgba(0,0,0,.08);
    }
    .clearFix {
    clear: both;
    }
    .pageTitle {
        font-weight: 400;
        color: #aaa;
        text-shadow: 1px 1px 2px rgba(0,0,0,.08);
        box-shadow: 1px 1px 2px rgba(0,0,0,.08);
        font-size: 24px;
        line-height: 48px;
    }
    .surveyWrapper {
        margin-top: 20px;
        padding-bottom: 40px;
        .dialogue {
            clear: both;
            text-align: left;
            margin-top: 20px;
            padding: 14px;
            background-color: rgba(255,255,255,.88);
            box-shadow: 1px 1px 4px rgba(0,0,0,.18);
            display: inline-block;
            position: relative;
            border-radius: 6px;
            &.left {
                float: left;
                margin-left: 28px;
                max-width: 264px;
                &::before {
                    content: " ";
                    position:absolute;
                    top:50%;
                    margin-top:-3px;
                    left:-7px;
                    display:block;
                    width:7px;
                    height:7px;
                    overflow:hidden;
                    line-height:0;
                    font-size:0;
                    background: url('../imgs/fleshLeft.png') no-repeat;
                    background-size: contain;
                }
            }
            &.right {
                float: right;
                margin-right: 28px;
                max-width: 264px;
                padding: 5px 14px;
                &::after {
                    content: " ";
                    position:absolute;
                    top:50%;
                    margin-top:-6px;
                    right:-7px;
                    display:block;
                    width:7px;
                    height:7px;
                    overflow:hidden;
                    line-height:0;
                    font-size:0;
                    background: url('../imgs/fleshRight.png') no-repeat;
                    background-size: contain;
                }
            }
            .answer {
                cursor: pointer;
                display: block;
                min-width: 32px;
                text-align: center;
                padding: 8px;
                margin: 16px 6px;
                height: 18px;
                line-height: 18px;
                border: 1px solid #ddd;
                color: #999;
                border-radius: 4px;
                &.selected {
                    border: 1px solid #777;
                    color: #333;
                }
            }
        }
    }
    .btnResult {
        cursor: pointer;
        display: block;
        font-size: 24px;
        width: 144px;
        text-align: center;
        padding: 4px;
        margin: 96px auto;
        height: 54px;
        line-height: 54px;
        border: 1px solid #ddd;
        color: #999;
        border-radius: 4px;
        border: 1px solid #777;
        color: #333;
    }
}
@media screen and (max-width: 919px) {
    .list-item {
    display: inline-block;
    margin-right: 10px;
    }
    .list-enter-active, .list-leave-active {
    transition: all .8s;
    }
    .list-enter, .list-leave-to
    /* .list-leave-active for below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(30px);
    }
    #topLine {
        width: 100%;
        height: .48rem;
        background-image: url(../imgs/topline.png);
        background-size: cover;
        box-shadow: 1px 1px .02rem rgba(0,0,0,.08);
    }
    .clearFix {
    clear: both;
    }
    .pageTitle {
        font-weight: 400;
        color: #aaa;
        text-shadow: 1px 1px .02rem rgba(0,0,0,.08);
        box-shadow: 1px 1px .02rem rgba(0,0,0,.08);
        font-size: .18rem;
        line-height: .48rem;
    }
    .surveyWrapper {
        margin-top: .2rem;
        padding-bottom: .4rem;
        .dialogue {
            clear: both;
            text-align: left;
            margin-top: .2rem;
            padding: .14rem;
            background-color: rgba(255,255,255,.68);
            box-shadow: 1px 1px .02rem rgba(0,0,0,.08);
            display: inline-block;
            position: relative;
            border-radius: .06rem;
            &.left {
                float: left;
                margin-left: .28rem;
                max-width: 2.64rem;
                &::before {
                    content: " ";
                    position:absolute;
                    top:50%;
                    margin-top:-.03rem;
                    left:-.07rem;
                    display:block;
                    width:.07rem;
                    height:.07rem;
                    overflow:hidden;
                    line-height:0;
                    font-size:0;
                    background: url('../imgs/fleshLeft.png') no-repeat;
                    background-size: contain;
                }
            }
            &.right {
                float: right;
                margin-right: .28rem;
                max-width: 2.64rem;
                padding: .05rem .14rem;
                &::after {
                    content: " ";
                    position:absolute;
                    top:50%;
                    margin-top:-.06rem;
                    right:-.07rem;
                    display:block;
                    width:.07rem;
                    height:.07rem;
                    overflow:hidden;
                    line-height:0;
                    font-size:0;
                    background: url('../imgs/fleshRight.png') no-repeat;
                    background-size: contain;
                }
            }
            .answer {
                display: block;
                min-width: .32rem;
                text-align: center;
                padding: .08rem;
                margin: 0.16rem .06rem;
                height: .18rem;
                line-height: .18rem;
                border: 1px solid #ddd;
                color: #999;
                border-radius: .04rem;
                &.selected {
                    border: 1px solid #777;
                    color: #333;
                }
            }
        }
    }
    .btnResult {
        display: block;
        font-size: .21rem;
        width: 1.44rem;
        text-align: center;
        padding: .04rem;
        margin: .96rem auto;
        height: .54rem;
        line-height: .54rem;
        border: 1px solid #ddd;
        color: #999;
        border-radius: .04rem;
        border: 1px solid #777;
        color: #333;
    }
}
</style>
